<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3的基本用法</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const app = Vue.createApp({
        template: `
          <div>
            <div>{{name1}}<span @click='clickMe'>点击我，文本不会变化</span></div>
            <div>{{name2}}<span @click='clickMe2'>点击我，文本发生变化</span></div>
            <div>学生姓名：{{student.name}}<span @click="changeStudentName">点击我，改变学生姓名</span></div>
            <div>数组第一项：{{arr[0]}}<span @click="changeArr">点击我，更改数组</span></div>
          </div>
         `,
        setup(props, context){
          const {ref, reactive} = Vue;
          let name2 = ref("Hello Vue3");
          let student = reactive({name:"王小二", age:18});
          let arr = reactive(["我是数组第一项"]);
          return{
            name1 :"Hello Vue3",
            name2:name2,
            student:student,
            arr:arr,
            clickMe:()=>{
              name1 = "it's me vue3";
            },
            clickMe2:()=>{
              name2.value = "It' me Vue3!"
            },
            changeStudentName:()=>{
              student.name = "王梅梅"
            },
            changeArr:()=>{
              arr[0] = "=^ - ^="
            }
          }
        }
      });
      const vm = app.mount("#root");
    </script>
  </body>
</html>
